<template>
  <div>
    <el-card style="margin-bottom: 50px">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="`已办(${toDoNum})`" name="first" />
        <el-tab-pane :label="`已阅(${toRead})`" name="second" />
      </el-tabs>
      <el-form
        :model="formData"
        label-width="120px"
        v-if="activeName === 'first'"
      >
        <el-row v-if="foldFlag">
          <el-col :span="6">
            <el-form-item label="单号:">
              <el-input v-model="formData.oddNumbers" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标题:">
              <el-input v-model="formData.title" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人:">
              <el-input v-model="formData.applicant" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
              <el-button text @click="fold(1)" class="btn"
                >更多 <span style="transform: rotate(90deg)">></span></el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!foldFlag">
          <el-col :span="6">
            <el-form-item label="单号:">
              <el-input v-model="formData.oddNumbers" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标题:">
              <el-input v-model="formData.title" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="申请人:">
              <el-input v-model="formData.applicant" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态:">
              <el-select v-model="formData.state">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!foldFlag">
          <el-col :span="6">
            <el-form-item label="表单名称:">
              <el-input v-model="formData.formName" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="开始时间:">
              <el-date-picker
                v-model="formData.beginTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
              <el-button text @click="fold(2)" class="btn"
                >收起
                <span style="transform: rotate(-90deg)">></span></el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form :model="formData2" label-width="120px" v-else>
        <el-row>
          <el-col :span="6">
            <el-form-item label="单号:">
              <el-input v-model="formData2.oddNumbers" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标题:">
              <el-input v-model="formData2.title" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="发起人:">
              <el-input v-model="formData2.promoter" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <div v-if="activeName === 'first'">
        <pure-table
          :data="tableData"
          :loading="loading"
          element-loading-text="查询中，请稍后..."
          :columns="columns"
          row-key="id"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
          style="margin-top: 30px"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
        </pure-table>
      </div>
      <div v-if="activeName === 'second'">
        <pure-table
          :data="tableData2"
          :loading="loading"
          element-loading-text="查询中，请稍后..."
          :columns="columns2"
          row-key="id"
          stripe
          :header-cell-style="{
            background: '#eff2fb',
            color: 'var(--el-text-color-primary)'
          }"
          style="margin-top: 30px"
        >
          <template #operation="{ row }">
            <el-button link type="primary">查看详情</el-button>
          </template>
        </pure-table>
      </div>
      <el-pagination
        class="pagination"
        :current-page="listPageObj.currentPage"
        :page-size="listPageObj.pageSize"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listPageObj.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";

interface Table {
  id: number;
  oddNumbers: string;
  title: string;
  formName: string;
  applicant: string;
  applyTime: string;
  currentApprovalNode: string;
  beginTime: string;
  endTime: string;
  state: number;
}

interface Table2 {
  id: number;
  oddNumbers: string;
  documentTitle: string;
  formName: string;
  promoter: string;
  initiationTime: string;
  processingTime: string;
}
const loading = ref(false);

const options = [
  {
    value: "1",
    label: "审批中"
  },
  {
    value: "2",
    label: "审批完成"
  },
  {
    value: "3",
    label: "已终止"
  },
  {
    value: "4",
    label: "退回"
  }
];

const activeName = ref("first");

const tableData: Table[] = [
  {
    id: 1,
    oddNumbers: "123123234",
    title: "xyxyxyxyxy",
    formName: "ahai",
    applicant: "测试1",
    applyTime: "2020-01-01",
    currentApprovalNode: "fffff",
    beginTime: "2018",
    endTime: "2018",
    state: 1
  },
  {
    id: 2,
    oddNumbers: "1524512356",
    title: "yyy",
    formName: "alin",
    applicant: "测试2",
    applyTime: "2020-02-02",
    currentApprovalNode: "jjjjj",
    beginTime: "2019",
    endTime: "2019",
    state: 2
  }
];
const tableData2: Table2[] = [
  {
    id: 1,
    oddNumbers: "6666",
    documentTitle: "88888",
    formName: "ahai",
    promoter: "测试1",
    initiationTime: "2020-01-01",
    processingTime: "2020-01-02"
  }
];

const columns: TableColumnList = [
  {
    label: "单号",
    prop: "oddNumbers"
  },
  {
    label: "单据标题",
    prop: "title"
  },
  {
    label: "表单名称",
    prop: "formName"
  },
  {
    label: "申请人",
    prop: "applicant"
  },
  {
    label: "申请时间",
    prop: "applyTime",
    sortable: true
  },
  {
    label: "当前审批节点",
    prop: "currentApprovalNode"
  },
  {
    label: "开始时间",
    prop: "beginTime",
    sortable: true
  },
  {
    label: "完成时间",
    prop: "endTime",
    sortable: true
  },
  {
    label: "状态",
    prop: "state",
    fixed: "right"
  },
  {
    label: "操作",
    width: "120",
    fixed: "right",
    slot: "operation"
  }
];
const columns2: TableColumnList = [
  {
    label: "单号",
    prop: "oddNumbers"
  },
  {
    label: "单据标题",
    prop: "documentTitle"
  },
  {
    label: "表单名称",
    prop: "formName"
  },
  {
    label: "发起人",
    prop: "promoter"
  },
  {
    label: "发起时间",
    prop: "initiationTime",
    sortable: true
  },
  {
    label: "处理时间",
    prop: "processingTime",
    sortable: true
  }
];

const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const formData = reactive({
  oddNumbers: "",
  title: "",
  applicant: "",
  state: "",
  beginTime: ref(""),
  formName: ""
});

const formData2 = reactive({
  oddNumbers: "",
  title: "",
  promoter: ""
});

const foldFlag = ref(true);

const toDoNum = 0;
const toRead = 1;

function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}

function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}

const fold = num => {
  if (num == 1) {
    foldFlag.value = false;
  } else {
    foldFlag.value = true;
  }
};
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}

.btn {
  color: #92b3fa;
}
</style>
